<template>
    <el-card shadow="never">
        <div class="head">规则基本信息</div>
        <el-form :form="listData" label-width="140px">
            <el-form-item label="规则名称" required>
                <el-input
                    v-model="listData.title"
                    placeholder="请输入规则名称"
                    style="width: 800px"
                    show-word-limit
                    maxlength="15" />
            </el-form-item>
            <el-form-item label="sop周期" required>
                <el-radio v-model="listData.cycle_type" :label="1">每日</el-radio>
                <el-radio v-model="listData.cycle_type" :label="2">每周（从周一至周日）</el-radio>
                <el-radio v-model="listData.cycle_type" :label="3">每月</el-radio>
            </el-form-item>
            <el-form-item label="执行员工" required>
                <el-select
                    v-model="listData.execute_workuser_list"
                    multiple
                    popper-class="zw-hide_select_option"
                    @click="opendept(domember, 1)"
                    @change="val => changedept(val, 1)">
                    <el-option v-for="item in domember" :key="item.id" :label="item.name" :value="item.id">
                        {{ item.name }}
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="推送要求" required>
                <el-checkbox v-model="qwchoose" style="margin-bottom: 10px">企微客户朋友圈&nbsp;</el-checkbox>
                <el-input-number
                    v-model="listData.corporate_times"
                    :min="0"
                    :max="3"
                    style="margin-left: -30px"
                    :disabled="!qwchoose"
                    @change="
                        val => {
                            changeEvent(val, 1);
                        }
                    " />&nbsp;(客户每日最多只接收3条)<br /><el-checkbox v-model="personal">
                    个人微信朋友圈，每日员工需发布&nbsp;
                </el-checkbox>
                <el-input-number
                    v-model="listData.personal_times"
                    :min="0"
                    :disabled="!personal"
                    style="width: 150px"
                    @change="
                        val => {
                            changeEvent(val, 2);
                        }
                    " />&nbsp;篇个人微信朋友圈内容
            </el-form-item>
            <el-form-item label="任务质检人">
                <el-switch v-model="is_enable" />&nbsp;<span>员工完成的情况是否需要质检</span>
                <div v-show="!is_enable">
                    <span>无需质检时，固定时间点发送应用消息通知创建人和指定成员，所有执行员工完成的情况</span><br />
                    <el-checkbox v-model="createPerson" disabled>创建人</el-checkbox>
                    <el-checkbox v-model="member">指定成员&nbsp;</el-checkbox>
                    <el-select
                        v-model="listData.report_workuser_list"
                        :disabled="!member"
                        multiple
                        popper-class="zw-hide_select_option"
                        @click="opendept(pointmember, 2)"
                        @change="val => changedept(val, 2)">
                        <el-option v-for="item in pointmember" :key="item.id" :label="item.name" :value="item.id">
                            {{ item.name }}
                        </el-option>
                    </el-select>
                </div>
                <div v-show="is_enable">
                    <el-form-item label="员工质检" required>
                        <el-select
                            v-model="listData.qa_workuser_list"
                            multiple
                            popper-class="zw-hide_select_option"
                            @click="opendept(qamember, 3)"
                            @change="val => changedept(val, 3)">
                            <el-option v-for="item in qamember" :key="item.id" :label="item.name" :value="item.id">
                                {{ item.name }}
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </el-form-item>
            <el-form-item v-show="is_enable" label="质检反馈">
                <span>质检人完成后，会将质检情况反馈给指定成员</span><br />
                <el-checkbox v-model="createPerson" disabled>创建人和执行员工</el-checkbox>
                <el-checkbox v-model="member">指定成员&nbsp;</el-checkbox>
                <el-select
                    v-model="listData.report_workuser_list"
                    :disabled="!member"
                    multiple
                    popper-class="zw-hide_select_option"
                    @click="opendept(pointmember, 2)"
                    @change="val => changedept(val, 2)">
                    <el-option v-for="item in pointmember" :key="item.id" :label="item.name" :value="item.id">
                        {{ item.name }}
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div class="btn">
            <el-button @click="router.go(-1)">取消</el-button><el-button type="primary" @click="submit">提交</el-button>
        </div>
    </el-card>
    <!--员工选择-->
    <ZWDepart ref="DepartRef" :type="1" @submit="getDepart"></ZWDepart>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, nextTick } from 'vue';
import router from '@/router';
import ZWDepart from '@/components/ZWDepart.vue';
import { ElMessage } from 'element-plus';
import { editSop, getlist } from '@/api/smartMarketing/marketAutomation/friendCircleSop';

const DepartRef = ref(null);
const qwchoose = ref(false);
const personal = ref(false);
const is_enable = ref(false);
const createPerson = ref(true);
const member = ref(false);
const domember = ref([]);
const pointmember = ref([]);
const qamember = ref([]);
const whichopen = ref(null);
const listData = reactive({
    id: '',
    title: '', //规则名称
    cycle_type: 1, //1 日、2 周、3月
    execute_workuser_list: [], //执行人
    corporate_times: 0, //企微朋友圈数量
    personal_times: 0, //个位朋友圈数量
    qa_enable: 1, //是否启用 质检 0 否，1 是
    qa_workuser_list: [], //质检人
    report_workuser_list: []
});
//打开员工弹窗
const opendept = (data: any, num: any) => {
    whichopen.value = num;
    DepartRef.value.selectedMember = data;
    DepartRef.value.depart = DepartRef.value.clean(DepartRef.value.depart);
    data.forEach((item: any) => {
        DepartRef.value.leftchecktree(item.id);
    });
    DepartRef.value.departVisble = true;
};
const getDepart = (res: any) => {
    if (whichopen.value == 1) {
        domember.value = res;
        listData.execute_workuser_list = [];
        domember.value.forEach((item: any, index: any) => {
            listData.execute_workuser_list[index] = item.id;
        });
    } else if (whichopen.value == 2) {
        pointmember.value = res;
        listData.report_workuser_list = [];
        pointmember.value.forEach((item: any, index: any) => {
            listData.report_workuser_list[index] = item.id;
        });
    } else {
        qamember.value = res;
        listData.qa_workuser_list = [];
        qamember.value.forEach((item: any, index: any) => {
            listData.qa_workuser_list[index] = item.id;
        });
    }
    DepartRef.value.departVisble = false;
};
//删除员工成员
const changedept = (res: any, num: any) => {
    let removeDepart: any;
    if (num == 1) {
        removeDepart = domember.value.find((item: any) => !res.includes(item.id));
        domember.value = domember.value.filter((data: any) => res.includes(data.id));
        listData.execute_workuser_list = res;
    } else if (num == 2) {
        removeDepart = pointmember.value.find((item: any) => !res.includes(item.id));
        pointmember.value = pointmember.value.filter((data: any) => res.includes(data.id));
        listData.report_workuser_list = res;
    } else {
        removeDepart = qamember.value.find((item: any) => !res.includes(item.id));
        qamember.value = qamember.value.filter((data: any) => res.includes(data.id));
        listData.qa_workuser_list = res;
    }
    DepartRef.value.removeItem(removeDepart);
};
const submit = () => {
    if (!listData.title) {
        ElMessage.warning('请输入规则名称');
        return;
    }
    if (!listData.execute_workuser_list.length) {
        ElMessage.warning('请选择执行员工');
        return;
    }
    if (!listData.corporate_times && !listData.personal_times) {
        ElMessage.warning('请填写推送要求');
        return;
    }
    if (is_enable.value && !listData.qa_workuser_list.length) {
        ElMessage.warning('请选择质检人员');
        return;
    }
    listData.qa_enable = Number(is_enable.value);
    listData.id = router.currentRoute.value.query.id;
    editSop(listData)
        .then((res: any) => {
            ElMessage.success('编辑成功');
            router.go(-1);
        })
        .catch((err: any) => {
            ElMessage.error('编辑失败');
        });
};
const getDetail = () => {
    getlist({ id: router.currentRoute.value.query.id })
        .then((res: any) => {
            Object.assign(listData, res);
            qwchoose.value = listData.corporate_times ? true : false;
            personal.value = listData.personal_times ? true : false;
            is_enable.value = listData.qa_enable ? true : false;
            member.value = listData.report_workuser_list ? true : false;
            domember.value = listData.execute_workuser_list;
            pointmember.value = listData.report_workuser_list;
            qamember.value = listData.qa_workuser_list;
            listData.execute_workuser_list = [];
            listData.qa_workuser_list = [];
            listData.report_workuser_list = [];
            domember.value.forEach((item: any, index: any) => {
                listData.execute_workuser_list[index] = item.id;
            });
            qamember.value.forEach((item: any, index: any) => {
                listData.qa_workuser_list[index] = item.id;
            });
            pointmember.value.forEach((item: any, index: any) => {
                listData.report_workuser_list[index] = item.id;
            });
        })
        .catch((err: any) => {
            ElMessage.error(err);
        });
};
getDetail();
watch(
    () => member.value,
    val => {
        if (!val) {
            pointmember.value = [];
            listData.report_workuser_list = [];
        }
    }
);
watch(
    () => qwchoose.value,
    val => {
        if (!val) {
            listData.corporate_times = 0;
        }
    }
);
watch(
    () => personal.value,
    val => {
        if (!val) {
            listData.personal_times = 0;
        }
    }
);
const changeEvent = async (val: any, index: any) => {
    if (Math.floor(val) !== val) {
        ElMessage.warning('请输入整数');
        await nextTick();
        if (index == 1) {
            listData.corporate_times = Math.floor(listData.corporate_times);
        } else {
            listData.personal_times = Math.floor(listData.personal_times);
        }
    }
};
</script>
<style lang="scss" scoped>
.head {
    font-size: 16px;
    font-weight: 500;
    color: #33302d;
    line-height: 14px;
    margin-bottom: 20px;
}
.btn {
    display: flex;
    justify-content: center;
    padding-top: 11px;
    border-top: 1px solid #eaeaea;
}
</style>
